<template>
  <div id="standardsList" v-cloak> 
   
    <div class="demo" :style="{  height: dtheight + 'px' }">
       <div  class="demo1" :style="{  height: dtheight-60 + 'px' }">
          <el-form ref="form"  label-width="0px">           

               <div class="table_box" v-for="(item,index) in form.listdata" :key="index">
                      <div class="table_box_title" ><div style="flex:1;">规格{{ index + 1 }}</div> <div> <i class="el-icon-delete" @click="delect_but(index)"></i> </div> </div>
                       <div class="table_con">
                            <div class="table_con_item">
                               规格名称
                            </div>
                            <div class="table_con_item" >
                                规格值
                            </div>
                      </div>
                        <div class="table_con" >
                            <div class="table_con_item" >
                                <el-form-item style="padding-top:7px;">
                                   <el-input v-model="item.name" placeholder="请输入" style="width:300px;"></el-input>
                                </el-form-item> 
                            </div>
                            <div class="table_con_item">
                                <el-form-item style="flex:1;padding-top:7px;">
                                   <el-input v-model="item.price" placeholder="请输入/每次一值" style="width:100%;"></el-input>
                                </el-form-item>  
                                <div class="tag_add_but" @click="tag_add_but(index)">
                                   添加
                                </div>  
                            </div>
                      </div>
                      <div class="tags_box" style="height:45px;">
                           <el-tag
                                 :key="index_tags"
                                 v-for="(item,index_tags) in item.tags"
                                 closable
                                 @close="handleClose(index_tags,index)" style="margin-left:10px;margin-top:7px;">
                                 {{item}}
                          </el-tag>
                      </div>
                     
               </div>

                <div class="table_box">
                     <div class="table_box_title" @click="add_stadards_but()">
                           <div><i class="el-icon-plus"  style="color:black;margin-top:-10px;"></i></div>   <div>添加规格</div> 
                     </div>
                </div>
                
          </el-form>

          <div class="box_but">
             <div class="but_next" @click="up_but()">上一步</div>
             <div class="but_next" @click="go_but()" style="margin-left:10px;">下一步</div>
          </div>

       </div>

    </div>

   </div>
</template>

<script>

export default {
   name: 'standardsList',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        form:{
         //   listdata:[{"name":"","price":'',"tags":['x','l','s']}],
           listdata:[{"name":"","price":'',"tags":[]}],
           speclist:[]
        },

    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 220
     
  },
  mounted (){
    
  },
  methods: {
   delect_but(index){
      if(this.form.listdata.length == 1){
            this.open1("必须纯在一种规格",'warning')
      }else{
        this.form.listdata.splice(index, 1); 
      }
   },
   add_stadards_but(){
      // if(this.form.listdata.length == 2){
      //       this.open1("只能添加两种规格",'warning')
      // }else{
      //     this.form.listdata.push({"name":"","price":'',"tags":[]})
      // }
       this.form.listdata.push({"name":"","price":'',"tags":[]})
      
   },
   tag_add_but(index){
      if(this.form.listdata[index].price != ''){
          this.form.listdata[index].tags.push(this.form.listdata[index].price)
          this.form.listdata[index].price = ''
      }else{
         this.open1("值不能为空",'warning')
      }
   },
   handleClose(index_tags,index){
      this.form.listdata[index].tags.splice(index_tags,1)
       console.log(index_tags,index)
   },
   up_but(){
        this.$router.go(-1)
   },
   go_but(){
       this.form.speclist = []
       for(let index in this.form.listdata) {  //提交规格值
             
         this.form.speclist.push({"name":this.form.listdata[index].name,"list":this.form.listdata[index].tags})
              
       }
       this.$store.commit('standards_fun',this.form)  //向vuex提交 规格数据    
        this.$router.push({
          path: '/index/shop/warehouse/detailsstandards',
          query: {
            // name:this.user_name,
            // id:row.uid
          }
        })
     },


  }
}
</script>


<style scoped>
[v-cloak]{
    display: none;
}
.demo{
    position: relative;
}
.demo1{
    overflow-y:auto;
}
.box_but{
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom:10px;
}
.but_next{
   height: 35px;
   width:80px;
   border:1px solid #E5E5E5;
   display: flex;
   align-items: center;
   justify-content: center;
   color:black;
   font-size:14px;
}

.table_box{
   border: 1px solid#E5E5E5;
   margin-top:20px;
}
.table_box:first-child{
   margin-top:0px;
}
.table_box_title{
   background: #E5E5E5;
   color:black;
   height: 45px;
   line-height: 45px;
   padding:0px 20px;
   font-size:16px;
   cursor:pointer;
   display: flex;
   align-items: center;
}
.table_con{
   display: flex;
}
.table_con_item{
   flex: 1;
   height: 50px;
   display: flex;
   align-items: center;
   padding:0px 10px;
   box-sizing: border-box;
   font-size:14px;
}
.table_box>.table_con{
   border-bottom: 1px solid #E5E5E5;
}
.table_box>.table_con:last-child{
   border-bottom:none;
}
.table_con>.table_con_item{
   border-right: 1px solid #E5E5E5;
}
.table_con>.table_con_item:last-child{
   border-right: none;
}
.tag_add_but{
   margin-left:10px;
   color:black;
   cursor:pointer;
}
</style>